<template>
  <div class="release-block">
    <base-panel class="left">
      <add-form ref="addForm" v-bind="$attrs" v-on="$listeners" :row="row" v-if="loading"></add-form>
      <div style="margin-top: 20px; text-align: center">
        <el-button @click="onClose" size="small">重置</el-button>
        <el-button type="primary" @click="submitForm" size="small"
        >{{this.row.id?"修改":"发布"}}
        </el-button
        >
      </div>
    </base-panel>
    <right-form class="right" ref="right-form" :row="row" v-if="loading"></right-form>
  </div>
</template>
<script>
  import AddForm from "./components/AddForm";
  import RightForm from "./components/RightForm";
  import news from "@/api/news/index";

  export default {
    components: {
      RightForm,
      AddForm
    },
    props: {},
    data() {
      return {
        id: this.$route.query.id,
        row: {},
        loading: false
      };
    },
    watch: {},
    created() {
      if (this.id) {
        this.getDetailNewsById()
      } else {
        this.loading = true
      }

    },
    mounted() {
    },
    methods: {
      getDetailNewsById() {
        news.getDetailNewsById(this.id).then(res => {
          this.row = res.data
          this.loading = true
        })
      },
      submitForm() {
        this.$refs["addForm"].submitForm(this.$refs["right-form"].getData(), this.gotoList);
      },
      gotoList() {
        this.$router.push("/news/index");
      },
      onOpen() {
      },
      onClose() {
        this.$refs["addForm"].resetForm();
        this.$refs["right-form"].resetForm();
      },
    }
  };
</script>
<style lang="scss" scoped>
  .release-block {
    display: flex;

    .left {
      flex: 1;
      overflow: auto;
    }

    .right {
    }

    ::v-deep.quill-editor {
      height: 465px !important;

      ::v-deep.ql-container,
      .ql-editor {
        height: calc(100% - 106px);
      }
    }
  }
</style>
